<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script src="/aaa/layuiadmin/layui/layui.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">


    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
        /*#battery-info{
            border: #0C0C0C;
            width: 200px;
            height: 500px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 10;
            background-color: #0C0C0C;
            opacity: 0.3;
            color: #00FFFF;
        }*/

    </style>
</head>
<body>
<!--<div id="battery-info">
    <div>
    <div>AAA</div>
    <div>郑州市金水区杨金路科教管理委员区</div>
    <div>可用电瓶数量100</div>
    </div>
</div>-->
<!--地图控件-->
<div id="container"></div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.11&key=69cb9649f5ad3765444bf4018a36878c"></script>
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
        var $ = layui.$;


        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom:14, //初始化地图层级
        });


        map.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: false,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:false      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function(status,result){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });

        });
        function onComplete(obj) {
            $.post({
                    url:'/aaa/battery/getPosition',
                    data:{
                        lng: obj.position.lng,
                        lat: obj.position.lat
                    },
                },
                function (data) {
                    for (var i = 0; i <data.length ; i++) {
                        pois[i] = [data[i].longitude,data[i].dimensionality,data[i].addName,+data[i].batterySum,data[i].batteryQuantity];
                    }
                    addMarker(pois);
                }
            );
        }
        var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
        var pois = new Array();
        <!--定位成功后出发事件-->
        /*  map.on('complete', function() {
              layer.alert(setPosition);

          });*/


        function addMarker(pois) {
            for (var i = 0; i <pois.length ; i++) {

                marker = new AMap.Marker({
                    icon:new AMap.Icon({
                        image: "/aaa/mapimg/dingwei.png",
                        size: new AMap.Size(128, 128),  //图标大小
                        imageSize: new AMap.Size(64,64)
                    }),
                    position: pois[i],
                    offset: new AMap.Pixel(-13, -30)
                });
                marker.setMap(map);
                for (var n = 0;n<pois[i].length;n++){
                    marker.content = 'location:'+pois[i][2]+',电瓶数量总数:'+pois[i][3]+'个,可用电瓶'+pois[i][4]+'个';
                }
                marker.on('click', markerClick);
                marker.emit('click', {target: marker});
            }
        }
        function markerClick(e) {
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
        }
        map.setFitView();
        map.on('error', function() {
            layer.confirm('定位失败', {
                btn: ['确定','取消'] //按钮
            }, function(){
            }, function(){
            });
        });
    });
</script>
</body>
</html>